<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员面板 - 我的电商网站</title>
    <link rel="stylesheet" href="/static/css/admin.css">
</head>
<body>
    <div class="admin-container">
        <aside class="admin-sidebar">
            <div class="admin-logo">管理后台</div>
            <nav class="admin-menu">
                <ul>
                    <li><a href="/admin" class="active"><i class="icon">📊</i> 仪表盘</a></li>
                    <li><a href="/admin/products"><i class="icon">🛍️</i> 商品管理</a></li>
                    <li><a href="/admin/orders"><i class="icon">📦</i> 订单管理</a></li>
                    <li><a href="/admin/users"><i class="icon">👥</i> 用户管理</a></li>
                    <li><a href="/admin/categories"><i class="icon">🏷️</i> 分类管理</a></li>
                    <li><a href="/admin/reviews"><i class="icon">⭐</i> 评价管理</a></li>
                    <li><a href="/admin/settings"><i class="icon">⚙️</i> 系统设置</a></li>
                </ul>
            </nav>
        </aside>
        
        <main class="admin-main">
            <header class="admin-header">
                <div class="header-left">
                    <button class="menu-toggle">☰</button>
                    <h1>仪表盘</h1>
                </div>
                <div class="header-right">
                    <div class="admin-search">
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="admin-notifications">
                        <button class="notification-btn">🔔</button>
                        <span class="notification-count">3</span>
                    </div>
                    <div class="admin-profile">
                        <img src="/static/images/admin-avatar.jpg" alt="管理员头像">
                        <span>管理员</span>
                    </div>
                </div>
            </header>
            
            <div class="admin-content">
                <div class="stats-cards">
                    <div class="stat-card">
                        <div class="stat-value">1,248</div>
                        <div class="stat-label">总订单</div>
                        <div class="stat-change up">+12%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">¥86,540</div>
                        <div class="stat-label">总收入</div>
                        <div class="stat-change up">+8%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">356</div>
                        <div class="stat-label">新用户</div>
                        <div class="stat-change down">-3%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">92%</div>
                        <div class="stat-label">满意度</div>
                        <div class="stat-change up">+2%</div>
                    </div>
                </div>
                
                <div class="charts-row">
                    <div class="chart-container">
                        <h2>销售趋势</h2>
                        <div class="chart" id="salesChart"></div>
                    </div>
                    <div class="chart-container">
                        <h2>用户增长</h2>
                        <div class="chart" id="usersChart"></div>
                    </div>
                </div>
                
                <div class="recent-orders">
                    <h2>最近订单</h2>
                    <table>
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>客户</th>
                                <th>状态</th>
                                <th>金额</th>
                                <th>日期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 订单数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <script src="/static/js/admin.js"></script>
</body>
</html>